<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector('div'))
    // pieData 就是需要设置给饼图的数据，数组，数组中包含一个又一个的对象，每一个对象中，需要有name 和 value 
    var pieData = [
      { name: '淘宝', value: '13431' },
      { name: '天猫', value: '6589' },
      { name: '京东', value: '26989' },
      { name: '唯品会', value: '5469' },
      { name: '小红书', value: '10697' },
    ]
    var option = {
      series: [
        {
          type: 'pie',
          data: pieData,
          label: { // 饼图文字的显示
            show: true, // 显示文字
            formatter: function(arg) { // 决定文字显示的内容
              return arg.name + '平台' + arg.value + '元\n' + arg.percent + '%'
            }
          },
          // radius: 20 // 饼图的半径
          // radius: '20%' // 百分比参照的是宽度和高度中较小的那一部分的一半来进行百分比设置
          // radius: ['50%', '75%'], // 第0个元素代表的是內圆的半径，第1个元素外圆的半径
          roseType: 'radius', // 南丁格尔图 饼图的每一个区域的半径是不同的
          selectedMode: 'single', //multiple  选中的效果，能够将选中的区域偏离圆点一小段距离
          selectedOffset: 30, // 选中偏移量
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>